<script setup lang="ts">
import insertLeft from '../assets/insertLeft.svg'
import insertRight from '../assets/insertRight.svg'
import insertTop from '../assets/insertTop.svg'
import insertBottom from '../assets/insertBottom.svg'
import deleteRow from '../assets/deleteRow.svg'
import deleteCol from '../assets/deleteCol.svg'
import merge from '../assets/merge.svg'
import mergeDel from '../assets/mergeDel.svg'
import { FloatToolsMergeBtnStatus } from '../models/floatTools/floatToolsMergeBtnStatus'
import { FloatToolsEmitType } from '../models/floatTools/floatToolsEmit'

const props = defineProps<{
    mergeBtn:FloatToolsMergeBtnStatus
}>()
const emit = defineEmits<{
    (e:'clickBtn', type:FloatToolsEmitType):void
}>()
</script>

<template>
<div class="floatToolsVue">
    <div>
        <div class="empty">　</div>
        <img @click="emit('clickBtn', 'insert_top')" :src="insertTop" title="顶部插入一行"/>
        <img @click="emit('clickBtn', 'delete_horizontal')" :src="deleteRow" title="删除整行"/>
    </div>
    <div>
        <img @click="emit('clickBtn', 'insert_left')" :src="insertLeft" title="左侧插入一列"/>
        <img @click="emit('clickBtn', 'merge')" v-if="props.mergeBtn=='merge'" :src="merge" title="合并单元格"/>
        <img @click="emit('clickBtn', 'mergeDel')" v-else-if="props.mergeBtn=='del'" :src="mergeDel" title="取消合并"/>
        <div v-else class="empty">　</div>
        <img @click="emit('clickBtn', 'insert_right')" :src="insertRight" title="右侧插入一列"/>
    </div>
    <div>
        <img @click="emit('clickBtn', 'delete_vertical')" :src="deleteCol" title="删除整列"/>
        <img @click="emit('clickBtn', 'insert_bottom')" :src="insertBottom" title="底部插入一行"/>
        <div class="empty">　</div>
    </div>
</div>
</template>

<style lang="scss" scoped>
    $btnSize: 29px;
    .empty, img{
        width: $btnSize;
        height: $btnSize;
    }
    img:hover{
        background-color: #ccc;
    }
    img{
        object-fit:contain;
        background-color: #fff;
        transition: 0.5s;
        cursor: pointer;
    }
    .floatToolsVue{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        flex-direction: column;
        align-items: stretch;
        background-color:#ccc;
        border-radius: 0px;
        padding: 2px;
        box-sizing: border-box;
        width: 100px;
        height: 100px;
    }
    .floatToolsVue>div{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        flex-direction: row;
        align-items: stretch;
    }
</style>